<template>
  <div class="basic-range-date">
    <el-date-picker
      v-model="date"
      type="daterange"
      range-separator="-"
      value-format="YYYY-MM-DD"
      class="w-full"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :disabled-date="disableDate"
      :prefix-icon="Calendar"
      @calendar-change="onCalendarChange"
      @change="handleChange"
    >
      <template #range-separator>
        <basic-icon
          class="flex-1"
          name="swap-right"
          color="#8A8E9A"
        ></basic-icon>
      </template>
    </el-date-picker>
  </div>
</template>

<script setup lang="ts">
import { dayjs } from 'element-plus'

import { BasicIcon } from '..'

type Value = string | undefined

interface IEmit {
  (event: 'update:start', value: Value): void
  (event: 'update:end', value: Value): void
  (event: 'change', value: [Value, Value]): void
}

interface IProps {
  start?: string
  end?: string
  startPlaceholder?: string
  endPlaceholder?: string
  disabledFuture?: boolean
  disabledRange?: boolean
}

const Calendar = defineComponent(() => {
  return () => h(BasicIcon, { name: 'calendar' })
})

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  startPlaceholder: useI18nContent('common.global.start_date'),
  endPlaceholder: useI18nContent('common.global.end_date'),
  disabledFuture: true,
  disabledRange: false
})

const date = ref<[string, string] | undefined>()
const startDate = ref<Date | undefined>()

function disableDate(date: Date) {
  let condition = false
  if (startDate.value && !props.disabledRange) {
    condition ||=
      dayjs(startDate.value).subtract(3, 'month').isAfter(date) ||
      dayjs(startDate.value).add(3, 'month').isBefore(date)
  }
  if (props.disabledFuture) {
    condition ||= dayjs().isBefore(date)
  }
  return condition
}

function onCalendarChange(e: [Date, Date]) {
  startDate.value = e[0]
}

function handleChange() {
  emit('change', [date.value?.[0], date.value?.[1]])
}

watch(date, () => {
  startDate.value = undefined
  if (!date.value) {
    emit('update:start', undefined)
    emit('update:end', undefined)
    return
  }
  const start = date.value ? dayjs(date.value[0]).unix().toString() : undefined
  const end = date.value
    ? dayjs(date.value[1])
        .set('hour', 23)
        .set('minute', 59)
        .set('second', 59)
        .unix()
        .toString()
    : undefined
  if (start === props.start && end === props.end) {
    return
  }
  emit('update:start', start)
  emit('update:end', end)
})

watchEffect(() => {
  if (props.start && props.end) {
    const t = 'YYYY-MM-DD'
    date.value = [formatUnix(+props.start, t), formatUnix(+props.end, t)]
  } else {
    date.value = undefined
  }
})
</script>

<style lang="scss">
.el-date-editor {
  &.el-input__wrapper {
    @apply px-[8px];
  }

  i.el-icon.el-input__icon {
    font-size: 17px !important;
    color: #8a8e9a;
  }

  input::placeholder {
    @apply text-[14px] text-[#C5CBD8];
  }
}
</style>
